<template>
  <scroll-view
    class="myView"
    :scroll-y="true"
    :lower-threshold="100"
    :enable-back-to-top="true"
    :enable-flex="true"
    @scrolltolower="onScrolltolower"
  >
    <BackgroundBar title="海岛" :showShare="true"></BackgroundBar>
    <view class="scrollView">
      <view class="myCard" :style="{ backgroundImage: `url(${myCardBg})` }">
        <view class="accountDataArap">
          <AccountData/>
        </view>
        <view class="fansNumberWrap">
          <FansNumber :hasCollect="true"/>
        </view>
      </view>
      <PostList :list="postList"/>
      <up-gap height="50rpx"></up-gap>
    </view>
  </scroll-view>
</template>

<script setup>
import {ref, onMounted, getCurrentInstance} from "vue";
import {useStore} from "vuex";
import {useChangeTabbar} from "@/utils/tabBar.js";
import BackgroundBar from "@/components/NavigationBar/background.vue";
import {onLoad} from "@dcloudio/uni-app";
import PostList from "@/components/PostList/index.vue";
import AccountData from "@/components/AccountData/index.vue";
import FansNumber from "@/components/AccountData/fansNumber.vue";
import userManagement from "@/api/user.js";
import articleManagement from "@/api/articleManagement.js";

useChangeTabbar();

const {proxy} = getCurrentInstance();

const myCardBg = ref("");
(async () => {
  myCardBg.value = await proxy.getFileIdToUrl("projectImg/myBg.png");
})();
const store = useStore();

// const onScrolltolower = () => {}
const postList = ref([]);
const userInfo = store.state.user.userInfo
const getListData = (pageNo, pageSize) => {
  articleManagement.getArticleListByUserId(userInfo.userId).then((res) => {
    postList.value = res.data;
    // pagingRef.value.complete(res.data);
  });
};
getListData()
// uni.$on("goUserPage", () => {
//   console.log("goUserPage");
// });
onLoad(() => {
  console.log("onLoad");
  uni.$on('update',function(data){
    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
  })
});

userManagement.getUserIdByUserId(userInfo.userId)
  .then((res) => {
    console.log("用户信息", res);
  })
  .catch((err) => {
    console.log(err);
  });
</script>

<style lang="scss">
page {
  height: 100vh;
  padding-bottom: calc(96rpx + env(safe-area-inset-bottom));
}

.myView {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.scrollView {
  flex: 1;
}

.myCard {
  width: 690rpx;
  height: 320rpx;
  margin: 30rpx auto;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 60rpx;
}

.accountDataArap {
  padding: 40rpx 25rpx;
}

.fansNumberWrap {
}
</style>
